<!DOCTYPE html>
<html>
<head>
    <title>高德地图导航示例</title>
    <meta charset="utf-8">
    <!-- 引入高德地图JS API -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=2cce89718645f1ceea983ab227d5815d"></script>
    <style>
        #container {
            width: 100%;
            height: 700px;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div id="panel" style="width: 100%; height: 200px; overflow: auto;"></div>
<script type="text/javascript">
    // 初始化地图对象
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 13 // 缩放级别
    });

    // 加载地理定位插件
    AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000,          // 超过10秒后停止定位，默认：5s
            buttonPosition: 'RB',    // 定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
            zoomToAccuracy: true     // 定位成功后是否自动调整地图视野到定位点
        });

        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status, result) {
            if (status == 'complete') {
                // data是具体的定位信息
                onComplete(result); // 定位成功的回调函数
            } else {
                onError(result); // 定位失败的回调函数
            }
        });
    });

    // 定位成功的回调函数
    function onComplete(data) {
        // 可以将定位结果展示在地图上
        var position = data.position;
        map.setCenter(position);
        var marker = new AMap.Marker({
            position: position,
            title: '当前位置'
        });
        marker.setMap(map);
        // 直接使用当前位置作为起点进行导航
        startNavigation(position);
    }

    // 定位失败的回调函数
    function onError(data) {
        // 定位出错
        console.log('定位出错', data);
    }

    // 导航函数
    function startNavigation(startPosition) {
        // 这里可以让用户选择目的地，或者使用默认的目的地
        var endPosition = [120.153578, 30.287125]; // 示例目的地经纬度
        AMap.plugin('AMap.Driving', function() {
            var driving = new AMap.Driving({
                map: map,
                panel: "panel" // 显示导航信息的面板
            });
            driving.search(startPosition, endPosition, function(status, result) {
                // 搜索完成后的回调
                if (status === 'complete') {
                    // 绘制驾车导航路线
                    console.log('导航路线绘制完成');
                } else {
                    console.log('导航路线绘制失败', result);
                }
            });
        });
    }
</script>
</body>
</html>